<html>

<head>
<title>Angular demo</title>
<style type="text/css">

table
{
	border: 1px solid #666;
}

th
{
	background-color: #666;
	color: #fff;
	width: 100px;
}

select, input
{
	border: 1px solid #666;
	width: 100%;
}

</style>
<script type="text/javascript" src="Geographic.js"></script>
<script type="text/javascript">

function setIndex(select, value)
{
	var index = 0;
	for (var i = 0; i < select.options.length; i++) {
		if ( value == select.options[i].value ) {
			index = i;
			break;
		}
	}
	select.options.selectedIndex = index;
}

function calc(calcMode)
{
	// Parts of Cartesian
	var wside = document.getElementById('wside');
	var degree = document.getElementById('degree');
	var minute = document.getElementById('minute');
	var second = document.getElementById('second');

	// Notation
	var notation = document.getElementById('notation');

	// Decimal
	var direct = document.getElementById('direct');
	var decimal = document.getElementById('decimal');

	var errorMsg = null;

	switch (calcMode) {
	case 0:
		// Cartesian to Number
	        var number = Number.cartesian([
	        	wside.options[wside.options.selectedIndex].value,
	        	degree.value,
	        	minute.value,
	        	second.value,
	        ]);

	        if ( isNaN(number) ) {
	        	errorMsg = 'Wrong Cartesians';
	        	break;
		}

		var isLongitude = wside.options[wside.options.selectedIndex].value == 'W' || wside.options[wside.options.selectedIndex].value == 'E';

		// Number to Notation
	        notation.value = number.toAngular(isLongitude)[4];

	        // Display Number
	        setIndex(direct, Number(isLongitude));
	        decimal.value = number;

	        break;
	case 1:
		// Notation to Number
	        var number = Number.cartesian(notation.value);

	        if ( isNaN(number) ) {
	        	errorMsg = 'Wrong Notation';
	        	break;
	        }

		var isLongitude = notation.value.charAt(0) == 'W' || notation.value.charAt(0) == 'E';

	        // Display Number
	        setIndex(direct, Number(isLongitude));
	        decimal.value = number;

		// Number to Cartesian
	        number = number.toAngular(isLongitude);

		setIndex(wside, number[0]);
		degree.value = number[1];
		minute.value = number[2];
		second.value = number[3];

	        break;
	case 2:
//		var number = Number(decimal.value).toAngular(direct.options.selectedIndex);
		var number = direct.options.selectedIndex 
			? Number(decimal.value).toLongitude()
			: Number(decimal.value).toLatitude();

	        if ( ! number ) {
	        	errorMsg = 'Wrong Decimal';
	        	break;
	        }

	        setIndex(wside, number[0]);
		degree.value = number[1];
		minute.value = number[2];
		second.value = number[3];

		notation.value = number[4];

		break;
	}

	if ( errorMsg ) {
		alert('Error !\n' + errorMsg);
	}
}

function init()
{
	var direct = Math.round(Math.random());
	var limit = direct ? 180 : 90;
	var number = (Math.random() * limit * 2) - limit;

	document.getElementById('direct').value = direct;
	document.getElementById('decimal').value = number;

	calc(2);
}

</script>
</head>

<body onload="init()">

<form>
<table>
<tr>
	<th>&nbsp;</th>
	<th>Direction</th>
	<th>Degree</th>
	<th>Minute</th>
	<th>Second</th>
	<th>&nbsp;</th>
</tr>
<tr>
	<th>Cartesian</th>
	<td>
	<select id="wside">
	<option value="N">North</option>
	<option value="S">South</option>
	<option value="E">East</option>
	<option value="W">West</option>
	</select>
	</td>
	<td><input type="text" id="degree" /></td>
	<td><input type="text" id="minute" /></td>
	<td><input type="text" id="second" /></td>
	<td><input type="button" value="Calc It" onclick="calc(0)" /></td>
</tr>
<tr>
	<th>Notation</th>
	<td>&nbsp;</td>
	<td colspan="3"><input type="text" id="notation" /></td>
	<td><input type="button" value="Calc It" onclick="calc(1)" /></td>
</tr>
<tr>
	<th>Decimal</th>
	<td>
	<select id="direct">
	<option value="0">Latitude</option>
	<option value="1">Longitude</option>
	</select>
	</td>
	<td colspan="3"><input type="text" id="decimal" /></td>
	<td><input type="button" value="Calc It" onclick="calc(2)" /></td>
</tr>
<tr>
	<th>&nbsp;</th>
	<td colspan="4">&nbsp;</td>
	<td><input type="reset" value="Reset" onclick="this.form.reset()" /></td>
</tr>
</table>
</form>

</body>
</html>

